<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #main{
            width: 400px;
            height: 600px;
            margin: 20px auto;
            background-image: url("images/background_1.png");
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="main"></div>
</body>
<script>

//=========================全局变量=================================//
    var mainObj=document.getElementById("main");
    var smallPlaneArray=[];
    var bulletArray=[];
    var leftBtn=false;//按键开关
    var rightBtn=false;
    var upBtn=false;
    var downBtn=false;
    var smallBullet=[];//小飞机子弹；
    var userPlan=new userPlane("images/myplane.gif",150,520,10);

//======================定时器============================================//
    //敌方小飞机子弹向下移动
    time1=setInterval(smmallBulletMove,30)
    //每隔1000创建一个小飞机
    time2=setInterval(createSmallPlane,1000);
    //给地方小飞机添加子弹
    time3= setInterval(addSmallBullet,4000);
    //小飞机移动
    time4=setInterval(smallPlaneMove,50);
    //30毫秒监听一次是否按下键盘
    time5=setInterval(ctrlPlay,30);
    /*大飞机子弹打中敌机*/
    time6=setInterval(crashCheck,10);
    /*大飞机子弹移动*/
    time7= setInterval(bulletMove,10);
    /*敌机飞机撞到大飞机*/
    time8= setInterval(planeCheck,10);
   //30毫秒监听一次是否按下键盘
    time9= setInterval(ctrlPlay,30);
    
    //监听打飞机的血量
    time10= setInterval(userPlanXue,10);



//====================================具体实现方法===========================================//
     //监听打飞机的血量
     function userPlanXue(){
        if(userPlan.xue<=0){
            clearInterval(time1);
             clearInterval(time2);
              clearInterval(time3);
               clearInterval(time4);
                clearInterval(time5);
                 clearInterval(time6);
                  clearInterval(time7);
                   clearInterval(time8);
                    clearInterval(time9);
                     clearInterval(time10);
                     alert("死了")
            // clearInterval(time)
            // alert("死了")；
        }
     }
    //创建小飞机的方法
    function smallPlane(src,x,y,speed) {
        this.src = src;
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.isDead=false;//小飞机存活状态
        this.exTime=30;//小飞机死亡倒计时
        //创建img标签
        this.smallPlaneNode = document.createElement("img");
        //设置小飞机的各种属性
        this.init = function () {
            this.smallPlaneNode.src = this.src;
            this.smallPlaneNode.style.position = "absolute";
            this.smallPlaneNode.style.left= this.x + "px";
            this.smallPlaneNode.style.top = this.y + "px";
            //把小飞机放上去
            mainObj.appendChild(this.smallPlaneNode);
        }
        //调用init()
        this.init();

        //使小飞机动
        this.move = function () {
            this.smallPlaneNode.style.top = parseInt(this.smallPlaneNode.style.top) + this.speed + "px";

        }

        this.shoot=function(){
              var newBullet=new bullet("images/bullet1.png",parseInt(this.smallPlaneNode.style.left)+15,
                parseInt(this.smallPlaneNode.style.top)+10,6);
              smallBullet.push(newBullet);

        }
    }

   //敌方小飞机移动
    function smmallBulletMove(){
        for(var i=0;i<smallBullet.length;i++){
           smallBullet[i].smallMove();
        }
    }

  

    //给每个小飞机添加子弹
    function addSmallBullet(){
        for(var i=0;i<smallPlaneArray.length;i++){
            smallPlaneArray[i].shoot();
        }
    }
   // var smallPlane=new smallPlane("images/enemy1_fly_1.png",100,470,10);
    //使用数组，调用定时器，可创建多个小飞机
    function createSmallPlane() {
       var smallPlan=new smallPlane("images/enemy1_fly_1.png",Math.random()*360,0,2);
        smallPlaneArray.push(smallPlan);
    }
    
    //创建方法，遍历数组，并使用move（）方法
    function smallPlaneMove(){
        for(var i=0;i<smallPlaneArray.length;i++){
            if(smallPlaneArray[i].isDead==false){
                smallPlaneArray[i].move();
                if(parseInt(smallPlaneArray[i].smallPlaneNode.style.top)>=600){
                    mainObj.removeChild(smallPlaneArray[i].smallPlaneNode);
                    smallPlaneArray.splice(i,1);//数组中删除
                }
            }else{//死亡
                    smallPlaneArray[i].exTime--;//每隔50毫秒减一，直到0，销毁当前小飞机
                    if(smallPlaneArray[i].exTime==0){
                        mainObj.removeChild(smallPlaneArray[i].smallPlaneNode);
                        smallPlaneArray.splice(i,1);//数组中删除
                }
            }
        }
    }
   

    //创建飞机
    function userPlane(src,x,y,speed) {
        this.src = src;
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.xue=5;//血量
        this.fengshu=0;//分数
        //创建img标签
        this.userPlaneNode = document.createElement("img");
        //设置飞机的各种属性
        this.init = function () {
            this.userPlaneNode.src = this.src;
            this.userPlaneNode.style.position = "absolute";
            this.userPlaneNode.style.left= this.x + "px";
            this.userPlaneNode.style.top = this.y + "px";
            //把飞机放上去
            mainObj.appendChild(this.userPlaneNode);
        }
        //调用init()
        this.init();

        //使飞机动
        this.moveLeft=function(){
            this.userPlaneNode.style.left=parseInt(this.userPlaneNode.style.left)-this.speed+"px";
            if(this.userPlaneNode.style.left=="-40px"){
                this.userPlaneNode.style.left="-40px";
            }
        }
        this.moveRight=function(){
            this.userPlaneNode.style.left=parseInt(this.userPlaneNode.style.left)+this.speed+"px";
            if(this.userPlaneNode.style.left=="440px"){
                this.userPlaneNode.style.left="-40px";
            }
        }
        this.moveUp=function(){
            this.userPlaneNode.style.top=parseInt(this.userPlaneNode.style.top)-this.speed+"px";
            if(this.userPlaneNode.style.top=="0px"){
                this.userPlaneNode.style.top="0px";
            }
        }
        this.moveDown=function(){
            this.userPlaneNode.style.top=parseInt(this.userPlaneNode.style.top)+this.speed+"px";
            if(this.userPlaneNode.style.top=="600px"){
                this.userPlaneNode.style.top="600px";
            }
        }
        this.shoot=function(){
            console.log("发子弹")
            if(this.fengshu<=10){
                     var newBullet=new bullet("images/bullet1.png",parseInt(this.userPlaneNode.style.left)+30,
                     parseInt(this.userPlaneNode.style.top)-10,10)
                     bulletArray.push(newBullet);
            }else{
                  var newBullet1=new bullet("images/bullet1.png",parseInt(this.userPlaneNode.style.left)+15,
                  parseInt(this.userPlaneNode.style.top)-10,10);
                  var newBullet2=new bullet("images/bullet1.png",parseInt(this.userPlaneNode.style.left)+30,
                  parseInt(this.userPlaneNode.style.top)-10,10);
                  bulletArray.push(newBullet1);
                  bulletArray.push(newBullet2);
            }
           
        }

        //子弹,可不可以像创建小飞机一样创建子弹？
//        this.shootNode=document.createElement("img");
//        this.shoot=function(){
//            this.shootNode.src="images/bullet1.png";
//            this.shootNode.style.position="absolute";
//            this.shootNode.style.left=parseInt(this.userPlaneNode.style.left)+32+"px";
//            this.shootNode.style.top=parseInt(this.userPlaneNode.style.top)-10+"px";
//            mainObj.appendChild(this.shootNode);
//        }
//        this.shoot();
    }

    
    //控制飞机的移动
    document.body.onkeydown=function(code){
        //e=document.event||arguments[0];
        mainObj.focus();
        //使用阿斯克码
        // console.log(code.keyCode);
        if(code.keyCode==37){//左
            leftBtn=true;
        }
        if(code.keyCode==38){//上
            upBtn=true;
        }
        if(code.keyCode==39){//右
            rightBtn=true;
        }
        if(code.keyCode==40){//下
            downBtn=true;
        }
        if(code.keyCode==32){
            userPlan.shoot();
        }

    }
    document.body.onkeyup=function(code){//关闭开关
        //e=document.event||arguments[0];
        mainObj.focus();
        //使用阿斯克码
       // console.log(code.keyCode);
        if(code.keyCode==37){//左
            leftBtn=false;
        }
        if(code.keyCode==38){//上
            upBtn=false;
        }
        if(code.keyCode==39){//右
            rightBtn=false;
        }
        if(code.keyCode==40){//下
            downBtn=false;
        }

    }
    function ctrlPlay(){//控制用户飞机动
        if(leftBtn==true){
            userPlan.moveLeft();
        }
        if(rightBtn==true){
            userPlan.moveRight();
        }
        if(upBtn==true){
            userPlan.moveUp();
        }
        if(downBtn==true){
            userPlan.moveDown();
        }
    }
 

    //子弹

    function bullet(src,x,y,speed) {
        this.src = src;
        this.x = x;
        this.y = y;
        this.speed = speed;

        //创建img标签
        this.bulletNode = document.createElement("img");
        //设置子弹的各种属性
        this.init = function () {
            this.bulletNode.src = this.src;
            this.bulletNode.style.position = "absolute";
            this.bulletNode.style.left= this.x + "px";
            this.bulletNode.style.top = this.y + "px";
            //把子弹放上去
            mainObj.appendChild(this.bulletNode);
        }
        //调用init()
        this.init();

        //使子弹动
        this.move = function () {
            this.bulletNode.style.top = parseInt(this.bulletNode.style.top) - this.speed + "px";
        }

        //小飞机子弹向下移动
        this.smallMove=function(){
             this.bulletNode.style.top = parseInt(this.bulletNode.style.top) + this.speed + "px";
        }
    }

    //使用数组，调用定时器，可创建多个子弹
//    function createBullet() {
    //        var shoot=new bullet("images/bullet1.png",180,520,10);
    //        bulleArray.push(shoot);
    //    }
//    //创建方法，遍历数组，并使用move（）方法
    function bulletMove(){
        for(var i=0;i<bulletArray.length;i++){
            bulletArray[i].move();
            if(parseInt(bulletArray[i].bulletNode.style.top)<=10){
                mainObj.removeChild(bulletArray[i].bulletNode);
                bulletArray.splice(i,1);//删除
            }
        }
    }

    //大飞机打中
    function crashCheck(){
        for(var i=0;i<smallPlaneArray.length;i++){
            for(var j=0;j<bulletArray.length;j++){
                //子弹 左边
                var bulletLeft=parseInt(bulletArray[j].bulletNode.style.left);
                //子弹顶部
                var bulletTop=parseInt(bulletArray[j].bulletNode.style.top);
                //小飞机顶部
                var  smallPlaneTop=parseInt(smallPlaneArray[i].smallPlaneNode.style.top);
                //小飞机左边
                var smallPlaneLeft=parseInt(smallPlaneArray[i].smallPlaneNode.style.left);
                //console.log(bulletLeft);
                if(smallPlaneArray[i].isDead==false){
                    if(bulletLeft>=smallPlaneLeft&&bulletLeft<=smallPlaneLeft+34&&
                            bulletTop>=smallPlaneTop&&bulletTop<smallPlaneTop+24){
                        //console.log("发生了碰撞");
                        //碰撞后移除子弹
                        mainObj.removeChild(bulletArray[j].bulletNode);
                        bulletArray.splice(j,1);
                        //小飞机图片替换
                        smallPlaneArray[i].smallPlaneNode.src="images/smallplaneboom.gif";
                        smallPlaneArray[i].isDead=true;

                        //加分数
                        userPlan.fengshu++;
                    }
                }
            }
        }
    }
      


       function planeCheck(){
        for(var i=0;i<smallPlaneArray.length;i++){
                //子弹 左边
                var userPlanLeft=parseInt(userPlan.userPlaneNode.style.left);
                console.log(userPlanLeft)
                //子弹顶部
                var userPlanTop=parseInt(userPlan.userPlaneNode.style.top);
                //小飞机顶部
                var  smallPlaneTop=parseInt(smallPlaneArray[i].smallPlaneNode.style.top);
                //小飞机左边
                var smallPlaneLeft=parseInt(smallPlaneArray[i].smallPlaneNode.style.left);
                //console.log(bulletLeft);
                if(smallPlaneArray[i].isDead==false){
                  if(smallPlaneLeft>userPlanLeft-30 && smallPlaneLeft<userPlanLeft+66 && smallPlaneTop>userPlanTop && smallPlaneTop<=userPlanTop+80){

                        userPlan.xue--;
                        // console.log( userPlan.xue);
                        //console.log("发生了碰撞");
                        // //碰撞后移除子弹
                        // mainObj.removeChild(bulletArray[j].bulletNode);
                        // bulletArray.splice(j,1);
                        //小飞机图片替换
                        smallPlaneArray[i].smallPlaneNode.src="images/smallplaneboom.gif";
                        smallPlaneArray[i].isDead=true;
                    }
                }
            
        }
    }
    </script>
</html>